<template>
  <div class="app-container">
    <el-row>
      <el-form ref="form" :model="form" :rules="rules" label-width="auto" size="small" class="demo-ruleForm">

          <el-form-item label="产品名称" prop="productName">
            <el-input v-model="form.productName" placeholder="请输入产品名称" />
          </el-form-item>

          <el-form-item label="产品唯一标识" prop="productMarking">
            <el-input v-model="form.productMarking" placeholder="请输入产品唯一标识" />
          </el-form-item>

<!--          <el-form-item label="所属品类ID" prop="productClassifiedId">-->
<!--            <el-input v-model="form.productClassifiedId" placeholder="请输入所属品类ID" />-->
<!--          </el-form-item>-->
          <el-form-item label="所属品类" prop="productClassifiedId">
            <treeselect v-model="form.productClassifiedId" :options="classifiedOptions" :normalizer="normalizer" placeholder="请选择父类型" />
          </el-form-item>

  <!--          <el-form-item label="所属品类名称" prop="productClassifiedName">-->
  <!--            <el-input v-model="form.productClassifiedName" placeholder="请输入所属品类名称" />-->
  <!--          </el-form-item>-->
        <el-row>
          <el-col :span="24">
            <el-form-item style="width:100%" label="设备类型" prop="deviceType">
              <el-select v-model="form.deviceType" placeholder="请选择设备类型">
                <el-option
                  v-for="dict in dict.type.device_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item style="width:100%" label="产品状态" prop="productState">
              <el-select v-model="form.productState" placeholder="请选择产品状态">
                <el-option
                  v-for="dict in dict.type.device_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>


<!--        <el-form-item label="父类型" prop="parentId">-->
<!--          <treeselect v-model="form.parentId" :options="classifiedOptions" :normalizer="normalizer" placeholder="请选择父类型" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="所属项目" prop="projectId">-->
<!--          <el-input v-model="form.projectId" placeholder="请输入所属项目" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="项目名称" prop="projectName">-->
<!--          <el-input v-model="form.projectName" placeholder="请输入项目名称" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="所属部门" prop="deptId">-->
<!--          <el-input v-model="form.deptId" placeholder="请输入所属部门" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="部门名称" prop="deptName">-->
<!--          <el-input v-model="form.deptName" placeholder="请输入部门名称" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="物模型定义" prop="metadata">-->
<!--          <el-input v-model="form.metadata" type="textarea" placeholder="请输入内容" />-->
<!--        </el-form-item>-->
        <el-form-item label="设备图标" prop="photoUrl">
          <image-upload :limit.default=1  v-model="form.photoUrl"/>
        </el-form-item>
<!--        <el-form-item label="连网方式" prop="networkWay">-->
<!--          <file-upload v-model="form.networkWay"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="消息协议ID" prop="messageProtocol">-->
<!--          <el-input v-model="form.messageProtocol" placeholder="请输入消息协议ID" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="消息协议名称" prop="protocolName">-->
<!--          <el-input v-model="form.protocolName" placeholder="请输入消息协议名称" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="传输协议" prop="transportProtocol">-->
<!--          <el-input v-model="form.transportProtocol" placeholder="请输入传输协议" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="数据存储策略相关配置" prop="storePolicyConfiguration">-->
<!--          <el-input v-model="form.storePolicyConfiguration" type="textarea" placeholder="请输入内容" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="设备接入方式名称" prop="accessName">-->
<!--          <el-input v-model="form.accessName" placeholder="请输入设备接入方式名称" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="设备接入方式" prop="accessProvider">-->
<!--          <el-input v-model="form.accessProvider" placeholder="请输入设备接入方式" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="数据存储策略" prop="storePolicy">-->
<!--          <el-input v-model="form.storePolicy" placeholder="请输入数据存储策略" />-->
<!--        </el-form-item>-->
        <el-form-item label="备注信息" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
    </el-row>
      <div slot="footer" class="dialog-footer" style="float:right">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>

  </div>
</template>

<script>
import { listProduct, getProduct, delProduct, addProduct, updateProduct } from "@/api/dev/product";
import { listClassified, getClassified, delClassified, addClassified, updateClassified } from "@/api/dev/classified";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "Configuration",
  props: ['id'],
  dicts: ['device_status','shenbao_state', 'device_type'],
  components: {
    Treeselect
  },
  data() {
    return {
      // 表单参数
      form: {},
      // 设备类型表格数据
      classifiedList: [],
      // 设备类型树选项
      classifiedOptions: [],
      // 表单校验
      rules: {
        productName: [
          { required: true, message: "产品名称不能为空", trigger: "blur" }
        ],
        productMarking: [
          { required: true, message: "产品唯一标识不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {

  },
  mounted() {
    this.getInfo();
  },
  methods: {
    /** 查询产品信息 */
    getInfo() {
      this.loading = true;
      listClassified(this.queryParams).then(response => {
        this.classifiedList = this.handleTree(response.data, "id", "parentId");
        //console.log(this.classifiedList);
        getProduct(this.id).then(response => {
          this.form = response.data;
          this.getTreeselect()
          this.loading = false;
        });
      });
    },
    /** 查询设备类型下拉树结构 */
    getTreeselect() {
      listClassified().then(response => {
        this.classifiedOptions = [];
        // const data = { id: 0, classifiedName: '顶级节点', children: [] };
        // data.children = this.handleTree(response.data, "id", "parentId");
        // this.classifiedOptions.push(data);
        this.classifiedOptions = this.handleTree(response.data, "id", "parentId");
      });
    },
    /** 转换设备类型数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.classifiedName,
        children: node.children
      };
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateProduct(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getInfo();
            });
          } else {
            addProduct(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getInfo();
            });
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.form={}
      this.$router.push({ path: '/dv/product', query: { } })
    },
  }
};
</script>
